/* reset */
* {
  margin: 0;
  padding: 0;
  border: none;
}
body {
  font-size: 14px;
}
/* users */
body {
  width: 100%;
  height: 100vh;
  background-color: #f0f3fb;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 60%;
  height: auto;
  margin-bottom: 3rem;
  box-sizing: border-box;
}
.panel .message-box {
  position: relative;
  widht: 100%;
  height: 3.4rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 0 1rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 6px -2px rgba(188, 188, 188, 0.5);
}
.panel .message-box.bg-black {
  color: white;
  background-color: #151626;
}
.panel .message-box.box-circle {
  border-radius: 2rem;
}
.panel .message-box.content-center {
  justify-content: center;
}
.panel .message-box.content-center .message {
  flex-grow: 0;
}
.panel .message-box .message {
  margin-left: 1.5rem;
  flex-grow: 1;
  font-family: Arial;
  font-weight: 300;
}
.process-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.3rem;
  z-index: 5;
  background-color: #c6c7e3;
  transition: width 0.2s ease;
}
/* icon */
i {
  display: inline-block;
  width: 2rem;
  height: 2rem;
}
i.icon-close {
  width: 1.5rem;
  height: 1.5rem;
}
.icon-right {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20128%20128%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%3Cg%20id%3D%22default%22%3E%3Ccircle%20cx%3D%2264%22%20cy%3D%2264%22%20r%3D%2264%22%20style%3D%22fill%3Argb(255%2C254%2C254)%3B%22%2F%3E%3Cg%20transform%3D%22matrix(0.919343%2C0%2C0%2C0.919343%2C3.66206%2C5.96997)%22%3E%3Cpath%20d%3D%22M45.261%2C91.624L22.356%2C68.719C20.023%2C66.386%2020.023%2C62.598%2022.356%2C60.265C24.689%2C57.932%2028.478%2C57.932%2030.811%2C60.265L50.153%2C79.607L96.97%2C32.79C99.353%2C30.407%20103.223%2C30.407%20105.606%2C32.79C107.989%2C35.174%20107.989%2C39.043%20105.606%2C41.427L55.31%2C91.723C55.11%2C92.009%2054.883%2C92.282%2054.628%2C92.537C52.932%2C94.233%2050.468%2C94.696%2048.352%2C93.926C47.474%2C93.637%2046.649%2C93.144%2045.951%2C92.446C45.693%2C92.188%2045.463%2C91.913%2045.261%2C91.624Z%22%20style%3D%22fill%3Argb(10%2C191%2C48)%3B%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.icon-right-success {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20128%20128%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%3Cg%20id%3D%22success%22%3E%3Ccircle%20cx%3D%2264%22%20cy%3D%2264%22%20r%3D%2264%22%20style%3D%22fill%3Argb(10%2C191%2C48)%3B%22%2F%3E%3Cg%20transform%3D%22matrix(0.919343%2C0%2C0%2C0.919343%2C3.66206%2C5.96997)%22%3E%3Cpath%20d%3D%22M45.261%2C91.624L22.356%2C68.719C20.023%2C66.386%2020.023%2C62.598%2022.356%2C60.265C24.689%2C57.932%2028.478%2C57.932%2030.811%2C60.265L50.153%2C79.607L96.97%2C32.79C99.353%2C30.407%20103.223%2C30.407%20105.606%2C32.79C107.989%2C35.174%20107.989%2C39.043%20105.606%2C41.427L55.31%2C91.723C55.11%2C92.009%2054.883%2C92.282%2054.628%2C92.537C52.932%2C94.233%2050.468%2C94.696%2048.352%2C93.926C47.474%2C93.637%2046.649%2C93.144%2045.951%2C92.446C45.693%2C92.188%2045.463%2C91.913%2045.261%2C91.624Z%22%20style%3D%22fill%3Awhite%3B%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.icon-close {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20128%20128%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%3Cg%20transform%3D%22matrix(0.795996%2C0.795996%2C-0.795996%2C0.795996%2C64%2C-37.8874)%22%3E%3Cg%20id%3D%22close%22%3E%3Cg%3E%3Cg%20transform%3D%22matrix(0.764298%2C1.11022e-16%2C0%2C1.875%2C15.0849%2C-18.5)%22%3E%3Cpath%20d%3D%22M70%2C22.446L70%2C65.554C70%2C66.904%2067.311%2C68%2064%2C68C60.689%2C68%2058%2C66.904%2058%2C65.554L58%2C22.446C58%2C21.096%2060.689%2C20%2064%2C20C67.311%2C20%2070%2C21.096%2070%2C22.446Z%22%20style%3D%22fill%3Argb(166%2C169%2C212)%3B%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22matrix(6.12323e-17%2C0.764298%2C-1.875%2C8.77495e-17%2C146.5%2C15.0849)%22%3E%3Cpath%20d%3D%22M70%2C22.446L70%2C65.554C70%2C66.904%2067.311%2C68%2064%2C68C60.689%2C68%2058%2C66.904%2058%2C65.554L58%2C22.446C58%2C21.096%2060.689%2C20%2064%2C20C67.311%2C20%2070%2C21.096%2070%2C22.446Z%22%20style%3D%22fill%3Argb(166%2C169%2C212)%3B%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
